<template>
  <div class="image-message no-select">
    <el-image
      fit="cover"
      :src="src"
      :lazy="true"
      :style="getImgStyle(src)"
      :preview-src-list="[src]"
    >
        <template #error>
            <div class="image-slot">图片加载失败...</div>
        </template>
        <template #placeholder>
            <div class="image-slot">图片加载中...</div>
        </template>
    </el-image>
  </div>
</template>

<script>
import { imgZoom } from '/@/views/chat/utils/functions.js'
export default {
    name: 'ImageMessage',
    props: {
        src: {
          type: String,
          default: '',
        }
    },
    setup() {
        const getImgStyle = (url) => {
            return imgZoom(url, 200)
        }
        return {
            getImgStyle
        }
    }
}
</script>

<style lang="scss" scoped>
.image-message {
  :deep(.el-image) {
    border-radius: 5px;
    cursor: pointer;
    background: #f1efef;

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      font-size: 13px;
      color: #908686;
      background: #efeaea;
    }
  }
}
</style>